package com.wake.mycomposebook.ui.home.layouts

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.ExperimentalMotionApi
import androidx.constraintlayout.compose.MotionLayout
import com.wake.data.AlbumsDataProvider

/**
 *@author created by WA03675
 *@date  2022-04-19 09:35
 *@des MotionLayout
 */

@Composable
fun MyMotionLayout() {
    Column {
        MotionBts()
        Spacer(modifier = Modifier.height(200.dp))
        MotionCards()
    }
}


@OptIn(ExperimentalMotionApi::class)
@Composable
fun MotionBts() {
    var animateButton by remember { mutableStateOf(false) }
    val buttonAnimationProcess by animateFloatAsState(
        targetValue = if (animateButton) 1f else 0f,
        animationSpec = tween(1000)
    )

    Spacer(modifier = Modifier.height(16.dp))

    MotionLayout(
        ConstraintSet(
            """{
                bt1: {
                  width: "spread",
                  height: 60,
                  start: ['parent','start',16],
                  end: ['parent','end',16],
                  top: ['parent','top',16]
                },
                bt2: {
                  width: 'spread',
                  height: 60,
                  start: ['parent','start',16],
                  end: ['parent','end',16],
                  top: ['bt1','bottom',16]
                },
                bt3: {
                  width: 'spread',
                  height: 60,
                  start: ['parent','start',16],
                  end: ['parent','end',16],
                  top: ['bt2','bottom',16]
                },
              }""".trimMargin()
        ),
        end = ConstraintSet(
            """{
                bt1: {
                  width: 100,
                  height: 60,
                  start: ['parent','start',16],
                  end: ['bt2','start',16],
                },
                bt2: {
                  width: 100,
                  height: 60,
                  start: ['bt1','end',16],
                  end: ['bt3','start',16],
  
                },
                bt3: {
                  width: 100,
                  height: 60,
                  start: ['bt2','end',16],
                  end: ['parent','end',16],
       
                },
                
                }""".trimMargin()
        ),
        progress = buttonAnimationProcess,
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        Button(onClick = { animateButton = !animateButton }, Modifier.layoutId("bt1")) {
            Text(text = "bt1")
        }

        Button(onClick = { animateButton = !animateButton }, Modifier.layoutId("bt2")) {
            Text(text = "bt2")
        }

        Button(onClick = { animateButton = !animateButton }, Modifier.layoutId("bt3")) {
            Text(text = "bt3")
        }
    }

}


@OptIn(ExperimentalMotionApi::class)
@Composable
fun MotionCards() {
    val albums = AlbumsDataProvider.albums.take(4)

    var animaState by remember {
        mutableStateOf(false)
    }

    val animationProgress by animateFloatAsState(
        targetValue = if (animaState) 1f else 0f,
        animationSpec = tween(1500)
    )

    MotionLayout(
        start =
        ConstraintSet(
            """{
                  card1: {
                    start: ['parent','start',5],
                  },
                  card2: {
                    start: ['card1','start',10]
                  },
                  card3: {
                    start: ['card1','start',15]                  
                  },
                  card4: {
                    start: ['card1','start',20]
                  }
                }""".trimMargin()
        ),
        end =
        ConstraintSet(
            """{
                  card1: {
                      start: ['parent','start',5],
                      top: ['parent','top',10]
                  },

                  card2: {
                    start: ['parent','start',5],                 
                    top: ['card1','bottom',30]
                  },
                  
                  card3: {
                      end: ['parent','end',5],
                      top: ['card1','bottom',30]
                  },
             
                  card4: {
                    end: ['parent','end',5]
                  }
             }""".trimMargin()
        ),
        progress = animationProgress,
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)

    ) {
        Image(
            painter = painterResource(id = albums[0].imageId), contentDescription = null,
            Modifier
                .width(100.dp)
                .height(100.dp)
                .layoutId("card1")
                .clickable { animaState = !animaState }
        )
        Image(
            painter = painterResource(id = albums[1].imageId), contentDescription = null,
            Modifier
                .width(100.dp)
                .height(100.dp)
                .layoutId("card2")
                .clickable { animaState = !animaState }
        )
        Image(
            painter = painterResource(id = albums[2].imageId), contentDescription = null,
            Modifier
                .width(100.dp)
                .height(100.dp)
                .layoutId("card3")
                .clickable { animaState = !animaState }
        )
        Image(
            painter = painterResource(id = albums[3].imageId), contentDescription = null,
            Modifier
                .width(100.dp)
                .height(100.dp)
                .layoutId("card4")
                .clickable { animaState = !animaState }
        )
    }

}


